<template>
  <div class="organizer-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="找组织" left-text="返回" left-arrow @click-left="goBack"></van-nav-bar>

    <!-- 组织者信息展示 -->
    <div
      v-for="organizer in organizers"
      :key="organizer.id"
      class="organizer-info"
      @click="goToDetail(organizer.id)"
    >
      <img class="organizer-pic" :src="organizer.pic" alt="组织图片" />
      <div class="organizer-content">
        <h2 class="organizer-name">{{ organizer.name }}</h2>
        <p class="organizer-description">{{ organizer.description }}</p>
      </div>
    </div>
  </div>
</template>
  

  <script>
import { Toast } from "vant";
import organizerApi from "@/api/organizerProfile.js";

export default {
  data() {
    return {
      organizers: [], // 初始化为空数组
    };
  },
  created() {
    this.fetchOrganizer();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goToDetail(id) {
      if (id) {
        this.$router.push(`/organizerDetail?id=${id}`);
      } else {
        Toast.fail("无效的组织者ID");
      }
    },
    fetchOrganizer() {
      organizerApi
        .getAllOrganizerProfile()
        .then((res) => {
          if (Array.isArray(res)) {
            this.organizers = res; // 确保数据是数组后赋值
          } else {
            Toast.fail("获取组织数据失败");
          }
        })
        .catch((err) => {
          console.error("获取组织数据失败：", err);
          Toast.fail("获取数据失败，请稍后再试");
        });
    },
  },
};
</script>
  
  
  <style scoped>
  .van-nav-bar {
  background-color: #007aff;
}
.van-nav-bar ::v-deep .van-nav-bar__text,
.van-nav-bar ::v-deep .van-nav-bar__title {
  color: white !important;
}

.van-nav-bar ::v-deep .van-nav-bar__arrow{
  color: white !important;
}
.organizer-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
}

.organizer-info {
  margin: 2vh 4vw;
  padding: 2vh 4vw;
  background: #fff;
  border-radius: 1vh;
  box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  flex-direction: row;
}

.organizer-pic {
  width: 15vh;
  height: 15vh;
  border-radius: 1vh;
  object-fit: cover;
}

.organizer-content {
  flex: 1;
  margin-left: 2vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.organizer-name {
  font-size: 2.5vh;
  font-weight: bold;
  color: #333;
}

.organizer-description {
  font-size: 1.8vh;
  color: #666;
}
</style>
  